/*
 * @Author: ccccy 459250301@qq.com
 * @Date: 2023-03-17 20:13:07
 * @LastEditors: ccccy 459250301@qq.com
 * @LastEditTime: 2023-04-18 10:36:45
 * @FilePath: \web-frontend-master\src\pages\base\billingDetails\InputDialog\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { ModalForm, ProForm, ProFormDatePicker, ProFormDateTimePicker, ProFormInstance, ProFormText } from '@ant-design/pro-components';
import { message } from 'antd';
import { useEffect, useRef } from 'react';
import { waitTime } from '@/utils/request';
import { addRecord, updateBillingDetails } from '@/services/api/billingDetails';

interface InputDialogProps {
  detailData?: API.BillingDetailsDTO;
  visible: boolean;
  onClose: (result: boolean) => void;
}

export default function InputDialog(props: InputDialogProps) {
  const form = useRef<ProFormInstance>(null);

  useEffect(() => {
    waitTime().then(() => {
      if (props.detailData) {
        form?.current?.setFieldsValue(props.detailData);
      } else {
        form?.current?.resetFields();
      }
    });
  }, [props.detailData, props.visible]);

  const onFinish = async (values: any) => {
    const { consumptionName, consumption, consumptionTime, note ,modificationTime } = values;
    const data: API.BillingDetailsDTO = {
      id: props.detailData?.id,
      consumptionName, consumption, consumptionTime, note ,modificationTime
    };
    if (props.detailData) {
      await updateBillingDetails(data);
    } else {
      await addRecord(data);
    }
    message.success('保存成功');
    props.onClose(true);
    return true;
  };

  return (
    <ModalForm
      width={600}
      onFinish={onFinish}
      formRef={form}
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.onClose(false),
      }}
      title={props.detailData ? '修改' : '新建'}
      open={props.visible}
    >
      <ProFormText
        name="consumptionName"
        label="消费对象"
        rules={[
          {
            required: true,
            message: '请输入',
          },
        ]}
      />
        <ProFormText
          name="consumption"
          label="消费金额"
          rules={[
            {
              required: true,
              message: '请输入消费金额',
            },
          ]}
        />
        <ProFormDateTimePicker
          name="consumptionTime"
          label="消费时间"
          rules={[
            {
              required: true,
              message: '请输入消费时间',
            },
          ]}
        />
        <ProFormText
          name="note"
          label="备注"
          rules={[
            {
              required: false,
            },
          ]}
        />
        <ProFormDateTimePicker
          name="modificationTime"
          label="修改时间"
          rules={[
            {
              required: true,
              message: '请输入修改时间',
            },
          ]}
        />

    </ModalForm>
  );
}